<template>
  <div id="yuchartBox" class="yuchartBox" />
  <height-chart ref="chartRef" />
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import heightChart from '@/components/custom/heightChart.vue'
import { getBudget } from '@/api/plant'

const props = defineProps({
  plantHeaderId: ''
})

const chartRef = ref(null)
const budgetData = ref('')
onMounted(async() => {
  getBudget({ plantHeaderId: props.plantHeaderId || null }).then(async res => {
    budgetData.value = res.data || {}
    await nextTick()
    chartRef.value.createPie('yuchartBox', budgetData.value.yield || 0, budgetData.value.plannedSpending || 0, budgetData.value.actualSpending || 0)
  })
})
</script>
<style lang="scss">

.yuchartBox{
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 10px 0 0 0;
}

</style>
